<template>
    <div class="talk">
        <button @click="getLoveTalk">获取一句土味情话</button>
        <ul>
            <li v-for="item in talkStore.talkList" :key="item.id">{{ item.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
	import { reactive } from 'vue';
	import axios from 'axios';
 	import { nanoid } from 'nanoid';
  import { useTalkStore } from '@/store/loveTalk';

	let talkStore = useTalkStore()

	async function getLoveTalk(){
			let {data:{content}} =  await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
			console.log(content);
			let obj = {id:nanoid(),title:content}
			//talkList.unshift(obj)
	}

</script> 

<style scoped>
    .talk{
        margin: 10px 0;
        background-color: orange;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }   
    ul{
      padding-bottom: 20px;
    }
    .talk >button{
        margin: 10px 10px ;
    }
</style>